<template>
	<div class="gncj">
		<div class="hear">
			<div>
				<h3 style="font-weight: bold;">当季目的地</h3>
			</div>
			<div>
				<span>你朋友圈的旅行内容，我们包了</span>
			</div>
			<div>
				<label>
					更多
					<i class="iconfont" style="font-size: 0.2rem;">&#xe637;</i>
				</label>
			</div>
		</div>
		<!--  -->
		<ul class="twoo" >
			<li @click="btn1()" :style="styleObject">
				国内
			</li>
			<li @click="btn2()" :style="styleObjects">
				出境
			</li>
		</ul>
		<div class="abq" v-if="gj==false">
			<router-link to="/" v-for="item in gncjList" :key="item.id"  :style="{backgroundImage:'url('+item.imgURL+')',backgroundSize:'cover'}" >
				<router-link to="/">
					<p>{{item.name}}</p>
					<p>{{item.bc}}</p>
				</router-link>
			</router-link>
		</div>
		<ul class="ull" v-if="gj==false">
			<li v-for="item in gncjLists" :key="item.id">
				<span v-if="item.name=='长白山'">冰封天地</span>
				{{item.name}}
			</li>
		</ul>
		<div class="abq" v-if="gj==true">
			<router-link to="/" v-for="item in gjList" :key="item.id"  :style="{backgroundImage:'url('+item.imgURL+')',backgroundSize:'cover'}" >
				<router-link to="/">
					<p>{{item.name}}</p>
					<p>{{item.bc}}</p>
				</router-link>
			</router-link>
		</div>
		<ul class="ull" v-if="gj==true">
			<li v-for="item in gjLista" :key="item.id">
				<span v-if="item.cj=='长白山'">冰封天地</span>
				<span v-if="item.cj=='新加波'">花园城市</span>
				<span v-if="item.cj=='吴哥迷城'">高棉的微笑</span>
				<span v-if="item.cj=='古巴'">小众社会主义风情</span>
				{{item.cj}}
			</li>
		</ul>
	</div>
</template>

<script>
export default{
	name:'Gncj',
	data(){
		return{
			gj:false,
			iscur:1,
			styleObject:{
				fontSize:'0.35rem',
				fontWeight:'bold',
				color:'#eaac00',
			},
			styleObjects:{
				fontSize:'',
				color:'#000000',
			},
			gncjList:[
				{ id:1 , imgURL:"gncjimg/gncjimg-01.jpg" , name:"牛背山" , bc:"王者归来"},
				{ id:2 , imgURL:"gncjimg/gncjimg-02.jpg" , name:"桂林" , bc:"山水画廊"},
				{ id:3 , imgURL:"gncjimg/gncjimg-03.jpg" , name:"九寨沟" , bc:"蓝冰仙境"},
			],
			gncjLists:[
				{ id:1,name:"长白山" },
				{ id:1,name:"潮汕" },
				{ id:1,name:"普莫雍措" },
				{ id:1,name:"三亚" },
				{ id:1,name:"老君山" },
				{ id:1,name:"泉州" },
			],
			gjList:[
				{ id:1 , imgURL:"gncjimg/gncjimg-04.jpg" , name:"牛背山" , bc:"王者归来"},
				{ id:2 , imgURL:"gncjimg/gncjimg-05.png" , name:"桂林" , bc:"山水画廊"},
				{ id:3 , imgURL:"gncjimg/gncjimg-06.jpg" , name:"九寨沟" , bc:"蓝冰仙境"},
			],
			gjLists:[
				{ id:1,name:"长白山" , cj:"新加波"},
				{ id:1,name:"潮汕" , cj:"格鲁吉亚" },
				{ id:1,name:"普莫雍措" , cj:"缅甸" },
				{ id:1,name:"三亚"  , cj:"墨西哥"},
				{ id:1,name:"老君山" , cj:"吴哥迷城" },
				{ id:1,name:"泉州" , cj:"古巴" },
			],
			gjLista:[
				{ id:1, cj:"新加波"},
				{ id:1, cj:"格鲁吉亚" },
				{ id:1, cj:"缅甸" },
				{ id:1, cj:"墨西哥"},
				{ id:1, cj:"吴哥迷城" },
				{ id:1, cj:"古巴" },
			]
		}
	},
	methods:{
		btn1(){
			this.gj = false;
			this.styleObject.fontSize = '0.35rem';
			this.styleObjects.fontSize = '0.3rem';
			this.styleObject.color = '#eaac00';
			this.styleObjects.color = '#000000';
			this.styleObject.fontWeight = 'bold';
			this.styleObjects.fontWeight = '500';
			console.log(this.styleObject.fontSize);
		},
		btn2(){
			this.gj = true;
			this.styleObject.fontSize = '0.3rem';
			this.styleObjects.fontSize = '0.35rem';
			this.styleObject.color = '#000000';
			this.styleObjects.color = '#eaac00';
			this.styleObject.fontWeight = '500';
			this.styleObjects.fontWeight = 'bold';
		}
	}
}
</script>

<style>
.gncj{
	margin-top: 0.5rem;
	height: 8rem;
	border-radius: 0.3rem;
}
.hear{
	display: flex;
	line-height: 0.8rem;
}
.hear div{
}
.hear div:nth-child(1){
	width: 25%;
	font-size: 0.42rem;
	text-align: center;
}
.hear div:nth-child(2){
	width: 60%;
	color: #ff9e51;
	text-indent: 0.8em;
}
.hear div:nth-child(2) span{
	background: #fff3ea;
	border-radius: 0.1rem;
	padding-left: 0.1rem;
	padding-right: 0.1rem;
}
.hear div:nth-child(3){
	width: 13%;
}
.hear div:nth-child(3) label{
	float: right;
	margin-right: 0.1rem;
}
.twoo{
	width: 40%;
	display: flex;
	text-align: center;
	margin-top: 0.1rem;
}
.twoo li{
	float: left;
	width: 50%;
	border: 1px solid #eee;
	margin-left: 0.2rem;
	line-height: 0.7rem;
	border-radius: 0.5rem;
}
.abq{
	width: 96%;
	margin: 0 auto;
	display: flex;
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	text-align: center;
}
.abq a{
	margin-top: 0.2rem;
	width: 32.5%;
	display: block;
}
.abq a:nth-child(1){
	border-top-left-radius: 0.3rem;
	border-bottom-left-radius: 0.3rem;
}
.abq a:nth-child(3){
	border-top-right-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
}
.abq a a{
	width: 100%;
	margin-top: 2rem;
}
.abq a a p:nth-child(1){
	color: white;
	font-size: 0.45rem;
	font-weight: bold;
}
.abq a a p:nth-child(2){
	color: #fff;
	font-weight: 100;
	font-size: 0.25rem;
	line-height: 0.54rem;
}
.ull{
	width: 96%;
	margin: 0 auto;
}
.ull li{
	margin-left: 0.25rem;
	margin-top: 0.33rem;
	text-align: center;
	float: left;
	width: 31%;
	border: 1px solid gray;
	line-height: 1rem;
	font-weight: bold;
	font-size: 0.4rem;
	position: relative;
	border-radius: 0.1rem;
}
.ull li:nth-child(1),
.ull li:nth-child(4)
{
	margin-left: 0rem;
}
.ull li span{
	position: absolute;
	left: 0;
	top: 0rem;
	line-height: 0.3rem;
	font-size: 0.1rem;
	padding-left: 0.15rem;
	padding-right: 0.15rem;
	border-bottom-right-radius: 0.2rem;
	background-color: #ffdd3f;
	font-weight: 500;
}
/*  */

</style>
